<script setup lang="tsx">
import { ref } from 'vue';
import { NButton } from 'naive-ui';
import { useBoolean } from '@sa/hooks';
import { fetchGetDeviceList } from '@/service/api';
import { useAppStore } from '@/store/modules/app';
import { deviceTypeRecord } from '@/constants/business';
import { useTable } from '@/hooks/common/table';
import DeviceSearch from './modules/device-search.vue';
import DeviceDetail from './modules/device-detail.vue';

const appStore = useAppStore();

const deviceDetailData = ref<TicketManageApi.DeviceManage.Device>();
const { bool: detailVisible, setTrue: showDetail } = useBoolean();

const {
  columnChecks,
  columns,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetDeviceList,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    mac: null,
    account: null
  },
  columns: () => [
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 64
    },
    {
      key: 'account',
      title: '宽带账号',
      align: 'center',
      width: 200
    },
    {
      key: 'mac',
      title: '设备MAC地址',
      align: 'center',
      minWidth: 200
    },
    {
      key: 'type',
      title: '设备类型',
      align: 'center',
      width: 120,
      render: row => {
        if (row.type === null) {
          return null;
        }

        const deviceType = deviceTypeRecord[row.type];
        return deviceType;
      }
    },
    {
      key: 'protectedSubnet',
      title: '设备保护内网地址网段',
      align: 'center',
      minWidth: 200
    },
    {
      key: 'wanIp',
      title: '设备wan口地址',
      align: 'center',
      minWidth: 200
    },
    {
      key: 'operate',
      title: '操作',
      align: 'center',
      width: 200,
      render: row => (
        <div class="flex-center gap-8px">
          <NButton
            type="primary"
            ghost
            size="small"
            onClick={() => {
              showDetail();
              deviceDetailData.value = row;
            }}
          >
            查看详情
          </NButton>
        </div>
      )
    }
  ]
});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <DeviceSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard title="设备列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="getData" />
      </template>
      <NDataTable
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
    <DeviceDetail v-model:visible="detailVisible" :data="deviceDetailData!" />
  </div>
</template>

<style scoped></style>
